<template>
	<view style="display: flex;flex-direction: column;align-items: center;">
		<u-navbar title=" " back-icon-color="#fff" :border-bottom="false" :immersive="true" :is-back="true"  :background="back" bgColor='rgba(0,0,0,0)'>  </u-navbar>
		<scroll-view class="scroll" scroll-y :enhanced="true" :bounces="false" style="height: 100vh;">
			<image src="https://s1.ax1x.com/2022/07/01/jQpZMd.png" mode="widthFix" style="margin-top: 76rpx;width: 100%;"></image>
			<view class="" style="display: flex;flex-direction: column;align-items: center;padding: 0 28rpx;height: auto;width: 100%;">
				<image src="https://s1.ax1x.com/2022/07/01/jMx2eP.png" mode="widthFix" style="margin-top: 97rpx;width: 100%;"></image>
				<view class="vipquanyi">
					<image src="https://s1.ax1x.com/2022/07/04/jJubSU.png" mode="widthFix" style="width: 100%;"></image>
					<image class="vipquanyi-title" src="https://s1.ax1x.com/2022/07/04/jJuqlF.png" mode="widthFix"></image>
					<swiper class="swiper" circular :indicator-dots="true" indicator-active-color="#DAAB81" indicator-color="rgba(246, 226, 205, 0.6)">
						
						<swiper-item style="display: flex;">
							<view v-for="(item,index) in listData.slice(0,3)" :key="index" class="swiper-item" @tap="$Router.push(`/pages/user/lingquan`)">
								<view class="price">
									{{item.amount}} <text>元</text>
								</view>
								<view class="swiper-item-title">{{item.title}}</view>
								<image  src="https://s1.ax1x.com/2022/07/04/jJujm9.png" ></image>
								<view class="hylq">会员领取</view>
							</view>
						</swiper-item>
						<swiper-item style="display: flex;">
							<view v-for="(item,index) in listData.slice(2,5)" :key="index" class="swiper-item" @tap="$Router.push(`/pages/user/lingquan`)">
								<view class="price">
									{{item.amount}} <text>元</text>
								</view>
								<view class="swiper-item-title">{{item.title}}</view>
								<image  src="https://s1.ax1x.com/2022/07/04/jJujm9.png" ></image>
								<view class="hylq">会员领取</view>
							</view>
						</swiper-item>
					</swiper>
					
					<image class="vipquanyi-bottom" @tap="$Router.push(`/pages/user/lingquan`)" src="https://s1.ax1x.com/2022/07/04/jJKPSO.png" mode="widthFix"></image>
				</view>
				
				
				<image src="https://s1.ax1x.com/2022/07/01/jMziex.png" mode="widthFix" style="margin-top: 72rpx;width: 100%;"></image>
				<image src="https://s1.ax1x.com/2022/07/01/jQSVH0.png" mode="widthFix" style="margin-top: 163rpx;width: 100%;"
					@tap="$Router.push(`/pages/public/richtext?id=5`)"
				></image>
			</view>
		</scroll-view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				back:{background:'rgba(0,0,0,0)'},
				listData:[]
			}
		},
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			// this.scrollTop = e.scrollTop;
			// console.log(e.scrollTop)
			if(e.scrollTop < 80){
				// this.back = { background:'rgba(255,255,255,0)'}
			}else{
				// this.back = { background:'rgba(255,255,255,1)'}
			}
		},
		onLoad() {
			this.getYouHui()
		},
		methods: {
			getYouHui(){
				let that = this;
				that.$http('common.couponLis').then(res => {
					console.log(res,'')
					if (res.code === 1) {
						that.listData = res.data
					}
				});
			}
		}
	}
</script>

<style lang="less">
page{
	
	
}
.scroll{
	background-color: #000000;
	background-image: url('https://s1.ax1x.com/2022/07/01/jMX1Gd.png');
	background-size: 100%  ;
	background-repeat: no-repeat;
}
.vipquanyi{
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	flex-direction: column;
	position: relative;
	margin-top: 138rpx;
	
}
.vipquanyi-title{
	position: absolute;
	top: 209rpx;
	width: 580rpx;
}
.vipquanyi-bottom{
	width: 606rpx;
	position: absolute;
	bottom: 60rpx;
	
}
.swiper{
	width: 580rpx;
	height: 341rpx;
	position: absolute;
	top: 300rpx;
}
.swiper-item{
	width: 196rpx;
	height: 273rpx;
	margin-right: 6rpx;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.swiper-item image{
	width: 100%;
	height: 100%;
}
.hylq{
	color: #3D1005;
	font-size: 27rpx;
	position: absolute;
	z-index: 2;
	bottom: 18rpx;
}
.price{
	font-size: 64rpx;
	color: #3D1005;
	position: absolute;
	top: 36rpx;
	z-index: 2;
	font-weight: bold;
}
.price text{
	font-size: 21rpx;
	color: #3D1005;
	margin-left: 3rpx;
}
.swiper-item-title{
	font-size: 21rpx;
	color: #3D1005;
	position: absolute;
	top: 138rpx;
	z-index: 2;
	letter-spacing:3rpx;
}
</style>
